import {
  drawerFormState,
  drawerActiveKey,
  operateType,
  drawer_disable_ok_button,
  isShowIMH5,
} from "./store";
import PersonComponent from "./components/PersonComponent";
import RobotComponent from "./components/RobotComponent";
import UserEditComponent from "./components/UserEditComponent";
import UserDetailComponent from "./components/UserDetailComponent";
import { handleSubmit } from "./utils";
import IMH5Component from "./IMH5Component";
import { tmp_proxy } from ".";
import { IMOptionsType } from "@/types/dict";
export const initTabsOptions: IMOptionsType[] = [
  {
    label: getProxyT("dict35"),
    value: 0,
  },
  {
    label: getProxyT("dict36"),
    value: 1,
  },
];
export const drawerTitle = ref("");
export const drawerLoading = ref(false);
export const drawerVisible = ref(false);
export const drawerInstance = ref<any>(null);
export const drawerConfig = () => {
  onMounted(() => {
    tmp_proxy.$bus.on("markLabel", (object: any) => {
      switch (object.type) {
        case 0:
          drawerFormState.tag_ids = object.formState.tag_ids;
          drawerFormState.systemIds = object.formState.systemIds;
          drawerFormState.accountSystemTag = object.formState.systemIds;
          break;
      }
    });
  });
  const initTabsSlot: any = {
    activeKey: drawerActiveKey,
    on: {
      change(drawerActiveKey: any) {
        drawerInstance?.value?.refs?.formValidate?.resetFields?.();
      },
    },
    options: ref(initTabsOptions),
  };
  const defineDrawer = {
    width: "800px",
    drawerInstance,
    loading: drawerLoading,
    visible: drawerVisible,
    title: drawerTitle,
    maskClosable: true,
    formState: drawerFormState,
    disable_ok_button: drawer_disable_ok_button,
    tabsSlot: initTabsSlot,
    slot: {
      extra_form_item: () => {
        return (
          <>
            {operateType.value === "add" ? (
              <>
                {drawerActiveKey.value === 0 ? (
                  <PersonComponent />
                ) : (
                  <RobotComponent />
                )}
              </>
            ) : operateType.value === "update" ? (
              <UserEditComponent />
            ) : operateType.value === "view" ? (
              <UserDetailComponent />
            ) : null}
            {isShowIMH5.value &&
              ["view", "update"].includes(operateType.value) && (
                <IMH5Component onClose={() => (isShowIMH5.value = false)} />
              )}
          </>
        );
      },
      extra: () => {
        return (
          <>
            <a-space size={8}>
              {operateType.value != "add" ? (
                <s-button
                  style="display: flex;align-items: center;column-gap: 5px;"
                  icon={renderIcon(
                    isShowIMH5.value
                      ? "icon-zhengkaiyanjing"
                      : "icon-jurassic_loseeyes"
                  )}
                  onClick={() => (isShowIMH5.value = !isShowIMH5.value)}
                >
                  {isShowIMH5.value
                    ? $t("base.closePreview")
                    : $t("base.openPreview")}
                </s-button>
              ) : null}
              {operateType.value != "view" ? (
                <s-button
                  icon={renderIcon("icon-cancel")}
                  onClick={withModifiers(() => {
                    tmp_proxy.$confirm({
                      closable: true,
                      maskClosable: true,
                      icon: null,
                      title: () => <>{$t("base.prompt")}</>,
                      style: {
                        top: "30%",
                      },
                      content: <>{$t("base.cancelTips")}</>,
                      onOk: () => (drawerVisible.value = false),
                    });
                  }, ["stop"])}
                >
                  {$t("base.cancel")}
                </s-button>
              ) : null}
              <s-button
                icon={renderIcon("icon-tubiao_tijiao")}
                loading={drawerLoading.value}
                disabled={
                  drawer_disable_ok_button?.value ?? drawer_disable_ok_button
                }
                type="primary"
                onClick={async () => handleSubmit()}
              >
                {operateType.value === "view" ? $t("base.ok") : $t("base.save")}
              </s-button>
            </a-space>
          </>
        );
      },
    },
  };

  watch(
    [() => defineDrawer.visible.value, () => operateType.value],
    (newArrayState, oldArrayState) => {
      if (newArrayState[1] === "add")
        initTabsSlot.options.value = initTabsOptions;
      else initTabsSlot.options.value = [];
    }
  );
  return defineDrawer;
};
